<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jq.js"></script>
    <style>
        .wrap {display: flex;width: 100%;height:100%;}
        .wrap1 {flex: 0 1 20%; }
        .wrap2 {flex: 0 1 20%; }
        .wrap3 {flex: 0 1 20%; }
        .wrap4 {flex: 0 1 20%; }
        .wrap5 {flex: 0 1 20%; }

        .mybutton{
            background:transparent;	/*按钮背景透明*/
            /*border-width:0px;	/*边框透明*/
            outline:none;	/*点击后没边框*/
        }
    </style>
<!-- 10,5,3,2,1 -->
    <body background="抽奖背景图.jpg" style="background-size: 100% 100%;">
        <div class="wrap">
            <div class="wrap1">
                <div style="text-align:center;">
                    <h1 style="color:rgb(255, 255, 255)">幸运奖</h1>
                    <br>
                    <h1 style="color:rgb(255, 255, 255)" id="name0">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name1">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name2">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name3">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name4">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name5">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name6">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name7">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name8">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name9">准备</h1>
                    
                    <br>

               </div>
          </div>
            <div class="wrap2" style="text-align:center;">
              <div >
                    <h1 style="color:rgb(255, 255, 255)">三等奖</h1>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <h1 style="color:rgb(255, 255, 255)" id="name10">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name11">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name12">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name13">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name14">准备</h1>
      
                    <br>
             </div>
          </div>
            <div class="wrap3" style="text-align:center;">
              <div >
                    <h1 style="color:rgb(255, 255, 255)">二等奖</h1>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                    <h1 style="color:rgb(255, 255, 255)" id="name15">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name16">准备</h1>
                    <h1 style="color:rgb(255, 255, 255)" id="name17">准备</h1>
                    <br>
                    <br>
                    <br>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <button style="color:rgb(255, 255, 255)" class="mybutton" id="crop" onclick="Start()"><h1>开始</h1></button>
                    <button style="color:rgb(255, 255, 255)" class="mybutton" id="crop1" onclick="Stop(j)"><h1>停！</h1></button>
             </div>
          </div>
      
          <div class="wrap4" style="text-align:center;">
            <div >
                <h1 style="color:rgb(255, 255, 255)">一等奖</h1>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                <h1 style="color:rgb(255, 255, 255)" id="name18">准备</h1>
                <h1 style="color:rgb(255, 255, 255)" id="name19">准备</h1>
                <br>
            </div>
          </div>
            <div class="wrap5" style="text-align:center;">
                <h1 style="color:rgb(255, 255, 255)">特等奖</h1>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <h1 style="color:rgb(255, 255, 255)" id="name20">准备</h1>
              <br>
          </div>
        </div>
    </body>
  
</html>

<script>
    

    var list = [
    "名字1","名字2","名字3","名字4","名字5","名字6",
    "名字7","名字8","名字9","名字10","名字11",
    "名字12","名字13","名字14","名字15","名字16"
                // ,"3","4","5","6","7","8","9",
                // "10","11","12","13","14","15","16","17","18","19",
                // "20","21","22","23","24","25","26","27","28","29",
                // "30","31","32","33","34","35"
                ];
    var j = 0;
    function Start(){
        document.getElementById("crop").setAttribute("disabled", true);
        //document.getElementById("crop1").removeAttribute("disabled", true);
        console.log("数组长度："+list.length)
        var Name = list[Math.floor(Math.random() * list.length)];	//0-35
        console.log(Name);
        var name = document.getElementById("name"+j).innerHTML=Name; 
        console.log(name); 
        console.log("j="+j)
        setTimeout("Start()",5);
    }
    function Stop(index){
        clearTimeout()
        console.log("i="+index)
        console.log("name:"+document.getElementById("name"+index).innerHTML);
        var listname = document.getElementById("name"+index).innerHTML
        delete list[listname]
        console.log("长度："+list.length)

        for(var i = 0 ;i<list.length;i++){
            console.log("list = "+list[i]);
            if(listname == list[i]){
                list.splice(i,1)
            } 
        }
        j++;    
        if(j==21){
            document.getElementById("crop1").setAttribute("disabled", true);
        }
    }
</script>
